//写法1：
// module.exports = {
//     entry: "./src/main.js",
//     output: {
//         path: __dirname,
//         filename: "dist/app.js"
//     }
// }

const HtmlWebpackPlugin = require("html-webpack-plugin");

//写法2：
//filename: "[name].[hash:20].js"
//[name]为入口配置的key值，[hash:20]代码改动重新打包会改变(有关版本号，最长为20)
module.exports = {
    entry: {
        main: "./src/main.js",
        alert: "./src/myalert.js"
    },
    output: {
        path: __dirname,
        filename: "dist/[name].[hash:20].js"
    },
    //配置webpack插件
    plugins: [
        new HtmlWebpackPlugin({
            //模板文件路径
            template: "./index.html",
            //输出文件的名字(输出文件路径为output的path)
            filename: "index.html"
        })
    ],
    module: {
        //配置文件编译的规则rules
        rules: [
            //编译ES6的配置
            {
                test: /\.js$/,//需要编译的文件路径的匹配规则
                exclude: /node_modules/,//需要去除的文件路径(该文件夹里的js文件不需要被编译)
                loader: "babel-loader",
                //babel-loader的配置
                //也可以写在.babelrc里
                /*
                options: {
                    //preset预设
                    presets: [
                        //"env"
                        //如果预设单独一项配置，配置为数组
                        //第一个值为预设名字
                        //第二个值为这个预设的配置
                        ["env",{
                            target: {
                                browsers: [">1%","last 2 versions"]//配置浏览器的用户和版本号
                            }
                        }]
                    ],
                    //插件编译
                    plugins: [
                        "transform-runtime"
                    ]
                }
                */
            },
            //编译css的配置
            {
                test: /\.css$/,
                //配置多个loader用!分隔，从后往前使用
                //先使用css-loader识别css文件，再使用style-loader编译css文件里的代码
                loader: "style-loader!css-loader",
            },
            //编译其他文件(如：图片.jpg、字体包.ttf)
            {
                test: /\.(jpg|jpeg|gif|png|ttf)$/,
                loader: "url-loader"
            }
        ]
    }
}